<template>
	<div class="hello">
		<el-container>
			<el-header>
				<h2>管理</h2>
			</el-header>
			<el-main>
				<el-form>
					<el-form-item label="管理姓名">
						<el-input v-model="user.name" placeholder="管理姓名"></el-input>
					</el-form-item>
					<el-form-item label="管理密码">
						<el-input v-model="user.password" placeholder="管理密码" show-password></el-input>
					</el-form-item>
					<el-form-item>
						<router-link to="/">
							<el-button>返回</el-button>
						</router-link>
						<el-button type="primary" @click="onSubmit">验证</el-button>
					</el-form-item>
				</el-form>
			</el-main>
			<el-footer>
				<a>copyright@lilou(饮水机管理员)</a>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					name: '',
					password: ''
				}
			}
		},
		methods: {
			onSubmit() {
				if (this.user.name === "" || this.user.password === "") {
					this.$message({
						type: 'error',
						message: '不可以为空～'
					})
				} else {
					axios.post('check_admin', {
						data: this.user
					}).then((res) => {
						if (res.data.data === 'different') {
							this.$message({
								type: 'error',
								message: "账号密码不对哦～"
							});
						} else if (res.data.data === 1) {
							this.$router.push('/system');
						} else if (res.data.data === 0) {
							this.$message({
								type: 'error',
								message: "你被饮水机管理员盯上啦！"
							});
						}
					})
				}
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	h1, h2 {
		font-weight: normal;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}

	a:link {
		font-size: 12px;
		color: #000000;
		text-decoration: none;
	}

	a:visited {
		font-size: 12px;
		color: #000000;
		text-decoration: none;
	}

	a:hover {
		font-size: 12px;
		color: #999999;
		text-decoration: underline;
	}
</style>
